<!-- 食堂负责人审核（套餐） -->
<template>
  <view class="content">
    <view class="title">
      <view class="title_left">
        <view> 商品明细 </view>
        <view
          >总计<text
            >￥{{
              list.reduce((prev, item) => prev * 1 + item.total_money * 1, 0)
                | number_format(2)
            }}</text
          ></view
        >
      </view>

      <view class="title_right" @click="goMaterials"> 查看材料配比 </view>
    </view>
    <view class="list_box">
      <view class="list_item" v-for="(item, index) in list" :key="index">
        <view class="list_item_title">
          <view class="name">
            <view class="point"></view>
            <view>品名：{{ item.goods_name }}</view>
          </view>
          <view> 数量：{{ item.goods_num }} </view>
        </view>
        <view class="type-Shelf_life">
          <view> 使用类型：{{ item.use_type_name }} </view>
          <view> 保质期（天）：{{ item.assurancetime }} </view>
        </view>
        <view class="production_date-unit_price">
          <view> 生产日期：{{ item.productiontime }} </view>
          <view>
            单价：<text>￥{{ item.goods_price }}</text></view
          >
        </view>

        <view class="details-subtotal">
          <view class="details" @click="details(item)"> 详情 </view>
          <view class="subtotal"> 小计：￥{{ item.total_money }} </view>
        </view>
      </view>
    </view>
    <!-- 查看原材料 -->
    <van-overlay :show="show">
      <view class="wrapper">
        <view class="block">
          <view class="title flex-bet">
            <view class="title-left">材料配比</view>
            <view>
              <view class="icon" @click="offShow">
                <van-icon name="clear" color="#3E3D3D" size="20px" />
              </view>
            </view>
          </view>
          <view class="table">
            <view class="row back-color">
              <view class="item-style">菜名</view>
              <view class="item-style">品名</view>
              <view class="item-style">数量</view>
              <view class="item-style">单位</view>
            </view>
            <view
              class="row"
              v-for="(item, index) in materialsList"
              :key="index"
            >
              <view class="item-style">{{ item.goods_name }}</view>
              <view class="item-style">{{ item.foods_name }}</view>
              <view class="item-style">{{ item.goods_num }}</view>
              <view class="item-style">{{ item.unit_name }}</view>
            </view>
          </view>
        </view>
      </view>
    </van-overlay>

    <!-- 详情弹框 -->
    <van-overlay :show="detailShow" lock-scroll="true" class="my-overlay">
      <view class="wrapper">
        <view class="block">
          <view class="title flex-bet">
            <view class="title-left">详情</view>
            <view class="icon" @click="offShow">
              <van-icon name="clear" color="#3E3D3D" size="20px" />
            </view>
          </view>
          <van-cell-group>
            <van-field
              :value="detailForm.goods_name"
              label="名称"
              readonly
            ></van-field>

            <van-field
              :value="detailForm.unit_name"
              label="单位"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.menu_stock"
              label="数量"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.menu_stock"
              label="是否营养餐"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.use_type_name"
              label="出库日期"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.use_type_name"
              label="入库日期"
              readonly
            ></van-field>
            <van-field
              :value="detailForm.use_type_name"
              label="使用类型"
              readonly
            ></van-field>

            <van-field
              :value="detailForm.menu_goods_price"
              label="小计"
              readonly
            >
              <view slot="input" class="txt-color">
                ￥{{ detailForm.menu_goods_price }}
              </view>
            </van-field>
          </van-cell-group>
        </view>
      </view>
    </van-overlay>
  </view>
</template>

<script>
export default {
  props: ["list"],
  data() {
    return {
      detailShow: false,
      show: false,
      materialsList: [], //材料配比
      goods_info: [], //套餐信息
      detailForm: {}, //详情信息
    };
  },
  onLoad() {},
  methods: {
    // 查看材料配比
    async goMaterials() {
      this.show = true;
      this.goods_info = this.list;
      let res = await this.$ajax.outCreategoodsmaterials({
        menu: this.goods_info,
      });
      if (res.code == 1) {
        this.materialsList = res.data.allgoodslist;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
        setTimeout(() => {
          this.show = false;
        }, 1000);
      }
    },
    // 详情
    details(item) {
      console.log(item, "详情");
      this.detailForm = item; //详情数据信息
      this.detailShow = true;
    },
    // 关闭
    offShow() {
      this.show = false;
      this.detailShow = false;
    },
  },
  mounted() {
    console.log(this.list, "list---");
  },
};
</script>

<style lang="scss" scoped>
.my-overlay {
  z-index: 9999; /* 设置一个较高的层级值 */
}

.flex-bet {
  display: flex;
  justify-content: space-between;
}
.del {
  .van-button {
    width: 120rpx;
    height: 55rpx;
    color: #d12312;
    border: 0.5rpx solid rgba(187, 187, 187, 1);
    border-radius: 60rpx;
    font-size: 24rpx;
  }
}
.txt-color {
  color: red;
}
.text-goodName {
  color: #2e88ee;
}
.content {
  .title {
    display: flex;
    justify-content: space-between;
    padding: 20rpx 30rpx;

    .title_left {
      color: rgba(153, 153, 153, 1);
      font-size: 26rpx;
      display: flex;
      justify-content: space-between;
      font-family: SourceHanSansSC-regular;
    }

    .title_right {
      display: flex;
      justify-content: space-between;
      color: rgba(153, 153, 153, 1);
      font-size: 26rpx;
      font-family: SourceHanSansSC-regular;
      font-size: 24rpx;
      border: 1px solid;
      color: white;
      background: #2e88ee;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 0rpx 10rpx;
      margin-left: 10rpx;

      text {
        color: red;
        font-weight: bold;
      }
      .total {
        margin-left: 10rpx;
        text {
          font-weight: bold;
          color: #d12312;
        }
      }
    }
  }
  .list_box {
    padding-bottom: 20rpx;
    .list_item {
      width: 100%;
      line-height: 55rpx;
      background: rgba(255, 255, 255, 1);
      color: rgba(16, 16, 16, 1);
      font-size: 28rpx;
      padding: 20rpx 20rpx;
      font-family: SourceHanSansSC-regular;
      margin-bottom: 20rpx !important;

      .list_item_title {
        display: flex;
        justify-content: space-between;

        .name {
          display: flex;
          color: rgba(16, 16, 16, 1);
          font-size: 28rpx;
          font-family: SourceHanSansSC-bold;
          align-items: center;
          font-weight: bold;

          .point {
            width: 15rpx;
            height: 15rpx;
            border-radius: 50%;
            background: rgba(98, 177, 88, 1);
            margin-right: 10rpx;
          }
        }
      }

      .type-Shelf_life {
        display: flex;
        justify-content: space-between;
      }

      .production_date-unit_price {
        display: flex;
        justify-content: space-between;
        border-bottom: 0.5rpx solid #e7e4e4;
        padding-bottom: 10rpx;
        text {
          color: #d12312;
        }
      }

      .details-subtotal {
        display: flex;
        justify-content: space-between;
        padding-top: 10rpx;

        .details {
          color: rgba(46, 136, 238, 1);
          font-size: 28rpx;
          font-family: SourceHanSansSC-regular;
        }

        .subtotal {
          color: rgba(209, 35, 18, 1);
          font-size: 28rpx;
          font-family: SourceHanSansSC-bold;
          font-weight: bold;
        }
      }
    }
  }
}

//  弹框样式
.wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: auto;

  .block {
    height: 900rpx;
    overflow: auto;
    overflow-y: scroll;
    width: 100%;
    background-color: #fff;
    margin: 0 30rpx;
    border-radius: 16px;
    padding: 20rpx 20rpx;
    font-size: 28rpx;
    .title {
      .title-left {
        font-size: 36rpx;
        font-weight: bold;
      }
    }
    .table {
      width: 100%;
      .item-style {
        width: 25%;
        padding: 10rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        word-break: break-all;
        // overflow-wrap: anywhere;
        border-right: 1px solid #ccc;
      }
      .row {
        display: flex;
        border: 1px solid #ccc;
      }
      .back-color {
        background: #cdcccc;
      }
    }
  }
}
.myover {
  z-index: 100 !important;
  .van-transition {
    z-index: 100 !important;
  }
}
.van-fade-enter-active {
  z-index: 99;
}
</style>